<template>
	<component is="a-modal" v-model:visible="visible" :width="1000" :title="title" :mask-closable="false"
		:ok-loading="loading" @cancel="close" @before-ok="submit">
		<!-- 表单信息 start -->
		<a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
			<a-form-item label="排序" field="sort_order">
				<a-input-number v-model="formData.sort_order" placeholder="请输入排序" />
			</a-form-item>

			<a-form-item label="项目信息" field="project_id">
				<a-select v-model='formData.project_id' :options="projectData" allow-clear placeholder="请选择项目" />
			</a-form-item>

			<a-form-item label="空间分类" field="space_class">
				<a-select v-model="formData.space_class" :options="spaceClassData" allow-clear placeholder="请选择空间分类" />
			</a-form-item>
			<a-form-item label="空间图片" field="space_image">
				<sa-upload-image v-model="formData.space_image" :limit="3" :multiple="false" />
			</a-form-item>
			<a-form-item label="vr图片" field="vr_image">
			        <sa-upload-image v-model="formData.vr_image" :limit="3" :multiple="false" />
			</a-form-item>
		  <a-form-item label="空间多图" field="space_images">
				<sa-upload-image v-model="formData.space_images" :limit="10" :multiple="true" />
		</a-form-item>
			<a-form-item label="VR链接" field="vr_link">
				<a-input v-model="formData.vr_link" placeholder="请输入VR链接" />
			</a-form-item>
			<a-form-item label="月租金（万/月）" field="rent_price">
				<a-input v-model="formData.rent_price" placeholder="请输入月租金（万/月）" />
			</a-form-item>
      <a-form-item label="日租金（元/㎡天）" field="day_price">
        <a-input v-model="formData.day_price" placeholder="请输入日租金（元/㎡天）" />
      </a-form-item>
				  <a-form-item label="面积（㎡）" field="building_area">
				    <a-input v-model="formData.building_area" placeholder="请输入面积（㎡）" />
				  </a-form-item>

			<!--	   <a-form-item label="租赁面积（㎡）" field="rent_area">-->
			<!--	     <a-input v-model="formData.rent_area" placeholder="请输入租赁面积（㎡）" />-->
			<!--	   </a-form-item>-->
			<a-form-item label="空间标题" field="space_title">
				<a-input v-model="formData.space_title" placeholder="请输入空间标题" />
			</a-form-item>
			<a-form-item label="空间地址" field="address">
				<a-input v-model="formData.address" placeholder="请输入空间地址" />
			</a-form-item>

			<!--      <a-form-item label="租赁性质" field="rent_nature">-->
			<!--		  <a-select-->
			<!--		    v-model="formData.rent_nature"-->
			<!--		    :options="rentNatureData"-->
			<!--		    allow-clear-->
			<!--		    placeholder="请选择租赁性质"-->
			<!--		  />-->
			<!--      </a-form-item>-->
			<!--	  <a-form-item label="主要用途" field="main_use">-->
			<!--	    <a-input v-model="formData.main_use" placeholder="请输入主要用途" />-->
			<!--	  </a-form-item>-->
			<a-form-item label="空间详情" field="space_detail">
				<ma-wangEditor v-model="formData.space_detail" :height="400" placeholder="请输入空间详情" />
			</a-form-item>






		</a-form>
		<!-- 表单信息 end -->
	</component>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		Message,
		Modal
	} from '@arco-design/web-vue'
	import api from '../api/space'
	import commonApi from '@/api/common'


	const emit = defineEmits(['success'])
	// 引用定义
	const visible = ref(false)
	const loading = ref(false)
	const formRef = ref()
	const mode = ref('')
	const spaceClassData = ref('')
	// const rentNatureData = ref('')
	const projectData = ref('')
	let title = computed(() => {
		return '空间列表' + (mode.value == 'add' ? '-新增' : '-编辑')
	})

	// 表单信息
	const formData = reactive({
		space_id: null,
		lang_code: '',
		space_title: '',
		space_image: '',
        space_images: '',
		vr_image: '',
		rent_nature: '',
		rent_price: '',
    day_price:'',
		building_area: '',
		vr_link: '',
		address: '',
		project_id: '',
		space_detail: '',
		rent_area: '',
		main_use: '',
		sort_order: 0,
	})

	// 验证规则
	const rules = {
		lang_code: [{
			required: true,
			message: '语言代码，如zh-CN、en-US等必需填写'
		}],
		space_title: [{
			required: true,
			message: '空间标题必需填写'
		}],
	}

	// 打开弹框
	const open = async (type = 'add') => {
		mode.value = type
		visible.value = true
		formRef.value.resetFields()
		await initPage()
	}

	// 初始化页面数据
	const initPage = async () => {



		const project = await commonApi.commonGet('/project/project/getclass')
		projectData.value = project.data
		const space_class = await commonApi.commonGet('/cassification/ClassificationDictionary/getCate', {
			classification_type: 14
		})
		spaceClassData.value = space_class.data


		// const space_type = await commonApi.commonGet('/cassification/ClassificationDictionary/getCate', {
		// 	classification_type: 15
		// })
		// rentNatureData.value = space_type.data
	}

	// 设置数据
	const setFormData = async (data) => {
		console.log(data)
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				formData[key] = data[key]
			}

		}
		console.log('Updated formData:', formData);
	}

	// 数据保存
	const submit = async (done) => {
		const validate = await formRef.value?.validate()
		if (!validate) {
			loading.value = true
			let data = {
				...formData
			}
			console.log(formData)
			let result = {}
			if (mode.value === 'add') {
				// 添加数据
				data.space_id = undefined
				result = await api.save(data)
			} else {
				// 修改数据
				result = await api.update(data.space_id, data)
			}
			if (result.code === 200) {
				Message.success('操作成功')
				emit('success')
				done(true)
			}
			// 防止连续点击提交
			setTimeout(() => {
				loading.value = false
			}, 500)
		}
		done(false)
	}

	// 关闭弹窗
	const close = () => (visible.value = false)

	defineExpose({
		open,
		setFormData
	})
</script>